<script lang="ts">
export default {
  name: "TodoMain",
  data(){
    return{
      showId:0
    }
  },
  methods:{
    //修改是否完成
    changeChecked(e,id){
      this.$store.commit('CHANGE_DATA',{key:'isChecked',id,value:e.target.checked});
      //保存到本地
      this.$store.commit('SAVE_DATA');
    },
    deleteOne(id){
      this.$store.commit('DELETE_LIST',id);
      //保存到本地
      this.$store.commit('SAVE_DATA');
    }
  }

}
</script>

<template>
  <div>
    <ul class="todo-main" >
      <li @mouseenter="showId = item.id" @mouseleave="showId = -1" v-for="item in $store.state.todoList" :key="item.id">
        <label>
          <input type="checkbox" @change="changeChecked($event,item.id)" :checked="item.isChecked"/>
          <span>{{item.content}}</span>
        </label>
        <button @click="deleteOne(item.id)" @mouseenter="showId = item.id" @mouseleave="showId = 0" v-if="showId === item.id" class="btn btn-danger" style="display:block">删除</button>
      </li>
    </ul>
  </div>
</template>

<style scoped>

</style>
